<template>
  <div class="detail">
    <div>
      <img style="height: 500px; width: 100%" src="@/assets/77.jpg" alt="" />
    </div>
    <div class="titleBox">
      <i class="el-icon-s-grid"></i>
      <div class="title">地产详情</div>
    </div>
    <div class="container">
      <div style="width: 500px; margin-right: 20px;">
        <div>
          <h1>{{ detailList.title }}</h1>
          <h4>地区：{{detailList.address}}</h4>
          <img style="width: 100%" :src="detailList.image" alt="" @click="showImg=true" />
        </div>
      </div>
      <div class="carousel"   v-show="showImg" >
        <span style="color:saddlebrown; font-size: 20px;  ">商品图片展示</span>
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="(item, index) in photo" :key="index">
            <img :src="item" style="width: 100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import { getPropertyById } from "@/api/properties";
export default {
  data() {
    return {
        showImg:false,
      detailList: {
        title: "",
        image: "",
        address:""
      },
      photo: [],
    };
  },
  created() {
    console.log(999, this.$route);
    this.$route.params.id;
    this.getDetail(this.$route.params.id);
  },
  methods: {
    async getDetail(id) {
      const res = await getPropertyById(id);
      this.detailList = res.data;
      this.photo = res.data.photos;
      console.log(666, this.detailList, this.photo);
    },
  },
};
</script>

<style scoped>
.detail {
  background-color: rgba(241, 241, 241, 0.546);

  height: 100%;
}
.el-icon-s-grid {
  font-size: 50px;
}
.title {
  font-size: 30px;
  margin-left: 10px;
  height: 80px;
  text-align: center;
  line-height: 80px;
}
.titleBox {
  margin-left: 50px;
  margin-top: 30px;
  display: flex;
  align-items: center;
}
.container {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
  height: 100%;
}
.carousel {
    
     flex: 1;
}
</style>
